<template>
  <div
    :class="
      `cascader-select ${
        option && option.disabled ? 'disabled select-disabled' : 'hover'
      }`
    "
    :style="`height: ${height}px; line-height: ${height}px;`"
    @click="handleClick"
  >
    <div class="cascader-select__container">
      <CascaderCheckBox
        :checked="option.selected"
        :disabled="option.disabled"
        click.stop
        @change="handleSelect"
      />
      <div class="text" :title="option.value">{{ option.value }}</div>
    </div>
  </div>
</template>

<script>
import CascaderCheckBox from "./CascaderCheckBox.vue";
export default {
  components: {
    CascaderCheckBox
  },
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    values: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    handleSelect(checked) {
      this.option.selected = checked;
      this.$emit("change", this.option, checked);
    },
    handleClick() {
      if (this.option.disabled) return;
      this.option.selected = !this.option.selected;
      this.$emit("change", this.option, this.option.selected);
    }
  }
};
</script>

<style lang="less" scoped>
@C: cascader-select;
.@{C} {
  width: 100%;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__container {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;

    .text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .count {
    min-width: 17px;
    // height: 14px;
    margin: 0 5px;
    line-height: 14px;
    text-align: right;
  }
}

.hover {
  &:hover {
    background: #ebf0ff;
    color: #4f6ef2;
  }
}
.select-disabled {
  background-color: #f5f5f5;
}
</style>
